<template>
    <div class="home">

        <el-container >
            <!--侧边栏-->
            <el-aside width="200px">
                <el-menu :default-openeds="['1', '3']"
                         background-color=#182450
                         text-color="#fff"
                         active-text-color="#409EFF"
                         unique-opened
                >
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-menu"></i>消防管理</template>

                        <el-menu-item index="1-1"><i class="el-icon-tickets"></i>物资类别</el-menu-item>

                        <el-submenu index="1-2">
                            <template slot="title"><i class="el-icon-tickets"></i>消防物资管理</template>
                            <el-menu-item index="1-2-1"><i class="el-icon-tickets"></i>物资管理</el-menu-item>
                            <el-menu-item index="1-2-2"><i class="el-icon-tickets"></i>重点部位部署</el-menu-item>
                            <el-menu-item index="1-2-3"><i class="el-icon-tickets"></i>质保到期</el-menu-item>
                            <el-menu-item index="1-2-4"><i class="el-icon-tickets"></i>NFC标签</el-menu-item>
                            <el-menu-item index="1-2-5"><i class="el-icon-tickets"></i>微型消防站</el-menu-item>
                        </el-submenu>

                        <el-submenu index="1-3">
                            <template slot="title"><i class="el-icon-tickets"></i>巡检巡查</template>
                            <el-menu-item index="1-3-1"><i class="el-icon-tickets"></i>巡检计划</el-menu-item>
                            <el-menu-item index="1-3-2"><i class="el-icon-tickets"></i>巡检任务</el-menu-item>
                            <el-menu-item index="1-3-3"><i class="el-icon-tickets"></i>巡更记录</el-menu-item>
                        </el-submenu>

                        <el-submenu index="1-4">
                            <template slot="title"><i class="el-icon-tickets"></i>安全评估</template>
                            <el-menu-item index="1-4-1"><i class="el-icon-tickets"></i>安全评估报告</el-menu-item>
                        </el-submenu>

                        <el-submenu index="1-5">
                            <template slot="title"><i class="el-icon-tickets"></i>隐患管理</template>
                            <el-menu-item index="1-5-1"><i class="el-icon-tickets"></i>隐患统计分析</el-menu-item>
                            <el-menu-item index="1-5-2"><i class="el-icon-tickets"></i>一般上报</el-menu-item>
                            <el-menu-item index="1-5-3"><i class="el-icon-tickets"></i>警情上报</el-menu-item>
                            <el-menu-item index="1-5-4"><i class="el-icon-tickets"></i>值班上报</el-menu-item>
                        </el-submenu>

                    </el-submenu>
                </el-menu>
            </el-aside>
            <!--主体-->
            <!--边框11-->
            <dv-border-box-11
                    overflow="hidden"
                    title="组织机构列表">
                <el-main>
                    <div style="width: 250px"></div>

                    <div>
                        <!--搜索框-->
                        <el-input
                                v-model="input1"
                                placeholder="搜索关键字" clearable
                                style="padding-top:50px;padding-left: 9px;width: 245px;"
                        ></el-input>
                        <div style="height:450px;" class="scrollbar">
                            <el-scrollbar style="height:100%">
                                <el-menu
                                        background-color="#242E66"
                                        text-color="#fff"
                                        active-text-color="#409EFF"
                                        unique-opened
                                >
                                    <el-submenu index="1">
                                        <template slot="title">智慧消防远程监管平台</template>

                                        <el-submenu index="1-1">
                                            <template slot="title">朔州市消防大队</template>


                                            <el-submenu index="1-1-1">
                                                <template slot="title">圣厚源大酒店</template>
                                                <el-menu-item index="1-1-1-1">圣厚源办公室</el-menu-item>
                                            </el-submenu>
                                            <el-menu-item index="1-1-1-2">瑞铭通信工程有限公司</el-menu-item>
                                        </el-submenu>

                                        <el-submenu index="1-2">
                                            <template slot="title">瑞铭通信工程有限公司</template>

                                            <el-submenu index="1-2—1">
                                                <template slot="title">朔州经济开发区管理委员会</template>
                                                <el-menu-item index="1-2-1-1">开发区环境局</el-menu-item>
                                                <el-menu-item index="1-2-1-2">开发区建设局</el-menu-item>
                                            </el-submenu>

                                            <el-submenu index="1-2—2">
                                                <template slot="title">朔州市邮政储蓄银行</template>
                                                <el-menu-item index="1-2-2-1">右玉县支行</el-menu-item>
                                                <el-menu-item index="1-2-2-2">山阴县同太南路支行</el-menu-item>
                                                <el-menu-item index="1-2-2-3">山阴县支行</el-menu-item>
                                                <el-menu-item index="1-2-2-4">怀仁迎宾街支行</el-menu-item>
                                                <el-menu-item index="1-2-2-5">怀仁市支行</el-menu-item>
                                                <el-menu-item index="1-2-2-6">平鲁区支行</el-menu-item>
                                                <el-menu-item index="1-2-2-7">应县支行</el-menu-item>
                                                <el-menu-item index="1-2-2-8">应县新世纪广场支行</el-menu-item>
                                                <el-menu-item index="1-2-2-9">鄯阳街支行</el-menu-item>
                                                <el-menu-item index="1-2-2-10">马邑南路支行</el-menu-item>
                                                <el-menu-item index="1-2-2-11">开发区支行</el-menu-item>
                                                <el-menu-item index="1-2-2-13">振华街支行</el-menu-item>
                                                <el-menu-item index="1-2-2-13">古北街支行</el-menu-item>
                                                <el-menu-item index="1-2-2-14">祥泰支行</el-menu-item>
                                                <el-menu-item index="1-2-2-15">市分行营业部</el-menu-item>

                                            </el-submenu>
                                            <el-submenu index="1-2—3">
                                                <template slot="title">开发南路</template>
                                                <el-menu-item index="1-2-3-1">朔城区第三中学</el-menu-item>
                                            </el-submenu>

                                            <el-submenu index="1-2—4">
                                                <template slot="title">文远路街道</template>
                                                <el-menu-item index="1-2-4-1">朔州今乔智慧公寓</el-menu-item>
                                                <el-menu-item index="1-2-4-2">朔州浩天宾馆</el-menu-item>
                                                <el-menu-item index="1-2-4-3">幸福家纺</el-menu-item>
                                            </el-submenu>
                                        </el-submenu>

                                    </el-submenu>

                                </el-menu>
                            </el-scrollbar>
                        </div>
                    </div>

                </el-main>
            </dv-border-box-11>
            <!--边框10-->
            <dv-border-box-10>
                <!--搜索名称 -->
                <div>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline"  style="padding: 12px 0px 10px 10px">
                        <el-form-item label="名称">
                            <el-input v-model="formInline.user"clearable
                                      @click="onSubmit"
                                      placeholder="请输入名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>搜索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--        卡片-->
                <el-card
                        style="border-color:#3F51B5;background-color:#243874;width: 99%; height: 45px;position: absolute;top: 13%;"
                        class="box-card" >
                    <!--新增按钮+弹窗对话框-->
                    <div>p
                        <el-button class="add_btn" type="primary" @click="add"
                                   style="position: absolute;top:5px;left: 1%"><i class="el-icon-plus"></i>新增</el-button>
                        <div>
                            <el-dialog style="width: 900px;height: 1000px;margin-left: 15vw;"
                                       title="新增" :visible.sync="dialogVisible">
                                <el-form :model="formInline">
                                    <el-form-item label="所属单位:"  width="80px">
                                        <div class="block">
                                            <span class="demonstration"></span>
                                            <el-cascader
                                                    placeholder="请搜索 所属单位"
                                                    :props="{ checkStrictly: true }"
                                                    :options="options"
                                                    clearable
                                                    filterable></el-cascader>
                                        </div>

                                    </el-form-item>
                                    <el-form-item label="名 称:" width="80px">
                                        <el-input style="width: 200px;position: absolute;left:75px"
                                                  class="dialogVisible_input" v-model="formInline.name"clearable></el-input>
                                    </el-form-item>

                                    <el-form-item label="日 期:" width="80px">
                                        <el-date-picker  style="width: 200px;position: absolute;left:75px" v-model="formInline.date" type="date" placeholder="选择日期"
                                                         value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="上级分类:" width="80px">
                                        <el-select style="width: 200px" class="dialogVisible_input" v-model="formInline.classify" clearable>
                                            <el-option label="火灾自动报警系统" value="火灾自动报警系统"></el-option>
                                            <el-option label="消防水监测系统" value="消防水监测系统"></el-option>
                                            <el-option label="室外消防栓系统" value="室外消防栓系统"></el-option>
                                            <el-option label="NB可燃气体系统" value="NB可燃气体系统"></el-option>
                                            <el-option label="NB探测器系统" value="NB探测器系统"></el-option>
                                            <el-option label="用电安全系统" value="用电安全系统"></el-option>
                                            <el-option label="视频监控系统" value="视频监控系统"></el-option>
                                            <el-option label="部件" value="部件"></el-option>
                                            <el-option label="水压表(GPRS)" value="水压表(GPRS)"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="物资图:" width="80px">

                                        <el-upload
                                                class="avatar-uploader"
                                                action="https://jsonplaceholder.typicode.com/posts/"
                                                :show-file-list="false"
                                                :on-success="handleAvatarSuccess"
                                                :before-upload="beforeAvatarUpload">
                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                        </el-upload>
                                    </el-form-item>
                                </el-form>

                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible=false">取 消</el-button>
                                    <el-button type="primary" @click="submit">确 定</el-button>
                                </div>
                            </el-dialog>

                        </div>
                    </div>
                    <!--下载弹窗-->
                    <div>
                        <el-button type="primary" icon="el-icon-download" circle
                                   style="position: absolute;top:3px;left:500px"
                                   @click="open"
                        ></el-button>
                    </div>
                    <!--          三个按钮-->
                    <div>
                        <!--          刷新按钮-->
                        <el-button type="primary" icon="el-icon-refresh" circle
                                   style="position: absolute;top:3px;left:550px"
                        ></el-button>
                        <el-button type="primary" icon="el-icon-s-operation" circle
                                   style="position: absolute;top:3px;left:590px"
                        ></el-button>
                        <el-button type="primary" icon="el-icon-search" circle
                                   style="position: absolute;top:3px;left:640px"
                        ></el-button>
                    </div>
                    <div v-for="o in 1" :key="o" class="text item">
                        <el-button style="position: absolute;top: 5px;left:100px" type="text">清 空</el-button>
                    </div>
                </el-card>
                <!--表格-->
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="background-color:#242E66;height:70%;width: 98%;position:absolute;top:150px;left: 5px">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="belong" label="所属单位"  width="120"></el-table-column>
                    <el-table-column prop="id" label="编号" width="120"></el-table-column>
                    <el-table-column prop="name" label="名称" width="120"></el-table-column>
                    <el-table-column prop="classify" label="上级分类" width="120"></el-table-column>
                    <el-table-column prop="picture" label="物资图" width="120"></el-table-column>
                    <el-table-column prop="date" label="创建日期"width="120"></el-table-column>
                    <el-table-column  label="操作" width="120"><template slot-scope="scope">
                        <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">移除
                        </el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </dv-border-box-10>

        </el-container>

    </div>
</template>


<script>

    export default {
        name: 'HomeView',
        data() {
            return {
                input1:'',
                dialogVisible: false,
                formInline: {},
                tableData: [{
                    belong:'瑞铭',
                    id:'1',
                    name: '王小虎',
                    picture:'',
                    date: '2016-05-03',
                }],
                // 级联选择器
                options: [
                    {value: '智慧消防远程监控平台', label: '智慧消防远程监控平台',
                        children: [{value: '朔州市消防大队', label: '朔州市消防大队',
                            children: [{value: '圣厚源大酒店', label: '圣厚源大酒店',
                                children: [{value: '圣厚源办公室', label: '圣厚源办公室'}]},
                                {value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司'}]},
                            {value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司',
                                children: [{value: '朔州市经济开发区管理委员会', label: '朔州市经济开发区管理委员会',
                                    children: [{value: '开发区环境局', label: '开发区环境局'},{value: '开发区建设局', label: '开发区建设局'}]},
                                    {value: '朔州市邮政储蓄银行', label: '朔州市邮政储蓄银行',
                                        children: [{value: '右玉县支行', label: '右玉县支行'},{value: '山阴县支行', label: '山阴县支行'}]},
                                    {value: '开发南路', label: '开发南路',
                                        children: [{value: '朔城区第三中学', label: '朔城区第三中学'}]},
                                    {value: '文远路街道', label: '文远路街道',
                                        children: [{value: '朔州今乔智慧公寓', label: '朔州今乔智慧公寓'},{value: '幸福家纺', label: '幸福家纺'}]}]}]}
                ],

            }
        },
        methods: {
            open() {
                this.$confirm('此操作将下载该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '下载成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消下载'
                    });
                });
            },
            add() {
                this.formInline = {
                    belong: '',
                    name: '',
                    classify: '',
                    picture:'',
                    date: '',
                }
                this.dialogVisible = true
            },
            //添加表格，
            submit() {
                this.tableData.push(this.formInline)
                this.dialogVisible = false
                console.log('submit!')
            },
            // 表格中移除，
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },

//上传物资图
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }

</script>

<style>
    .home{
        height: 96vh;
    }
    .el-aside{
        overflow:hidden
    }
    .el-menu
    {
        height: 100%;
        border-right: none;
    }
    .el-container{
        height:100%;
        background-color: #242E66;
    }
    .el-button{
        padding: 8px 5px;
    }
    .el-input{

    }
    .dv-border-box-11{
        width: 350px;}
    .el-input__inner {
        background-color: #242E66;
        color: #fff;
    }
    .el-form-item__label{
        font-size:15px;
        color:#fff;
    }
    .el-dialog{
        background-color:#242E66;
    }
    .el-dialog__title {
        color: #fff;
    }
    .el-select-dropdown__list {
        background-color: #242E66;
    }
    .el-scrollbar__wrap {
        overflow-x: hidden;
        height: 100%;
    }
    .el-select-dropdown__list {
        height: 100px;
        width: 20vw;
    }
    .dv-border-box-12{
        width: 100%;
        height: 41px;
        position: absolute;
        top: 25%;
    }
    .el-table th.el-table__cell.is-leaf {
        background-color: #3F51B5;
        border: none !important;
    }

    .el-table td.el-table__cell{
        background-color: #242E66;
        border: none !important;
    }
    .el-table,.el-table thead {
        color: white;
    }
    ::v-deep .el-table tbody tr:hover>td {
        background: #242E66 !important;
    }
    ::v-deep  .el-table__body-wrapper .table__row:hover{
        background: #242E66 !important;
    }

    ::v-deep .el-table__body tr.current-row > td {
        color: #ffffff;
        background: #57bfff !important; /*备选#ebeef5  #f4f3f9 #dddddd #ffe48d*/
    }
    /* 表格鼠标悬浮时的样式（高亮） */
    .el-table--enable-row-hover .el-table__body tr:hover {
        background:#313463;
        border: 1px solid #313463;
    }
    /*表格鼠标悬停的样式（背景颜色）*/
    .el-table tbody tr:hover > td {
        background-color: #313463 !important;
    }

    /*物资图样式*/
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .avatar {
        width: 50px;
        height: 50px;
        display: block;
    }
    .el-cascader-menu__list {
        height: 170px;
        background-color: #242E66;
    }
    .el-cascader-node__label{
        color:#fff;
        background-color: #242E66;
    }
    .el-cascader-node:not(.is-disabled) {
        background-color: #242E66 !important;
    }
    .el-select-dropdown__list {
        height: 150px;
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
        background-color: #182450;
    }
    .el-select-dropdown__item {
        background-color: #242E66;
        color:#fff;
    }

</style>

